import React from "react";

/**
 *
 * <Child>文本子节点</Child>
 *
 * <Child><p>我是标准HTML，p标签子节点</p></Child>
 *
 * const fun = () => <div>我是一个函数子节点</div>
 * <Child>{fun}</Child>
 * 
 * 注意：<Child> {fun} </Child>，React会将{fun}前后的空格也解析，最终解析结果是一个数组[' ', fun, ' ']
 * 注意：<Child>
 *        {fun} 
 *      </Child>
 *    这样写，就没有问题，不会解析前后空格？？？？
 * 
 *
 */

class Parent extends React.Component {

  render() {
    return (
      <div>
        <h1>我是父组件</h1>
        <hr/>
        {/* 子组件 */}

      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        {/* 使用children属性 */}
        <h2>我是子组件, 下面是父组件通过children属性传递过来的数据</h2>

      </div>
    );
  }
}

export default Parent;
